/* 
普通类
className	描述
layui-main	设置一个固定宽度为 1160px 的水平居中块
layui-border-box	设置元素及其所有子元素均为 box-sizing: content-box 模型的容器
layui-clear	清除前面的同级元素产生的浮动
layui-clear-space 2.8+	清除容器内的空白符
layui-inline	设置元素为内联块状结构
layui-elip	设置单行文本溢出并显示省略号
layui-unselect	屏蔽选中
layui-disabled	设置元素为不可点击状态
layui-circle	设置元素为圆形。需确保 width 和 height 相同 
*/

/* 
显示隐藏
className	描述
layui-show	设置元素为 display: block 可见状态
layui-hide	设置元素为 display: none 隐藏状态，且不占用空间
layui-show-v	设置元素为 visibility: visible 可见状态
layui-hide-v	设置元素为 visibility: hidden 不可见状态，且依旧占用空间 
*/

/* 三角实体
className	描述
layui-edge	定义一个三角形基础类
layui-edge-top	设置向上三角
layui-edge-right	设置向右三角
layui-edge-bottom	设置向下三角
layui-edge-left	设置向左三角
*/

/*
内外边距
className	描述
layui-padding-1	4px 内边距
layui-padding-2	8px 内边距
layui-padding-3	16px 内边距
layui-padding-4	32px 内边距
layui-padding-5	48px 内边距
layui-margin-1	4px 外边距
layui-margin-2	8px 外边距
layui-margin-3	16px 外边距
layui-margin-4	32px 外边距
layui-margin-5	48px 外边距 */

/* 
文字大小
className	文字大小和预览
layui-font-12	12px
layui-font-13 2.8+	13px
layui-font-14	14px
layui-font-16	16px
layui-font-18	18px
layui-font-20	20px
layui-font-22 2.8+	22px
layui-font-24 2.8+	24px
layui-font-26 2.8+	26px
layui-font-28 2.8+	28px
layui-font-30 2.8+	30px
layui-font-32 2.8+	32px
*/

.layui-color-preview {
    color: #ff5722;
    color: #ffb800;
    color: #16baaa;
    color: #1e9fff;
    color: #a233c6;
    color: #2f363c;
    color: #fafafa;
}

/* 
背景颜色
className	背景色	预览
layui-bg-red	红	#ff5722
layui-bg-orange	橙	
layui-bg-green	绿	
layui-bg-blue	蓝	
layui-bg-purple 紫	
layui-bg-black	深	
layui-bg-gray	浅	 
*/

/* 
文字颜色
className	文字颜色和预览
layui-font-red	    红
layui-font-orange	橙
layui-font-green	绿
layui-font-blue	    蓝
layui-font-purple 	紫
layui-font-black	深
layui-font-gray	    浅
*/

.swiper-container-fade .swiper-slide {
    opacity: 0 !important;
}

.swiper-container-fade .swiper-slide-active {
    opacity: 1 !important;
}

.site-header {
    position: relative;
}

.site-header .site-header-top {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}


.site-header .site-header-top .logo {
    flex: 1;
    position: relative;
    z-index: 10;
}
.site-header .site-header-top .logo img{
    height: 78px;
}

.site-header .site-header-top .tools {
    display: flex;
    position: relative;
    z-index: 10;
}

.site-header .site-header-top .tools .search,
.site-header .site-header-top .tools .meau {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    cursor: pointer;
}

.site-header .site-header-top .tools .search {
    margin-right: 16px;
}

.site-header .site-header-top .tools .meau {}

header .sologn {
    display: none;
    font-size: 42px;
    color: #ffffff;
    text-align: center;
    padding: 48px 0;
}

header .site-header-banner{
    padding-top: 15%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
@media screen and (max-width:767.98px){
    header .site-header-banner{
        padding-top: 30%;
    }
}

.site-head-m{
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 99;
    background-color: transparent;
}
.site-head-m .logo{
    max-width: calc(100% - 60px);
    margin-right: auto;
}
.site-head-m .m-nav-btn{
    flex-shrink: 0;
}
/* 
* PC导航 
*/
.site-nav {
    background-color: #0D67C2;
}

.site-nav .site-nav-list {
    position: relative;
    display: flex;
    list-style: none;
}

.site-nav .site-nav-list .site-nav-item {
    position: relative;
    transition: all .3s;
}

.site-nav .site-nav-list .site-nav-item>a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 56px;
    width: 120px;
    font-size: 16px;
    border: none;
    color: #FFFFFF;
    display: inline-block;
    text-decoration: none;
    z-index: 3;
}

.site-nav .slide1,
.site-nav .slide2 {
    position: absolute;
    bottom: 0;
    display: inline-block;
    height: 66px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.site-nav .site-nav-list .slide1 {
    background-color: #0057AE;
    z-index: 2;
}

.site-nav .site-nav-list .slide2 {
    opacity: 0;
    background: #0057AE;
    /* border: 1px solid #8ab9ff; */
    z-index: 1;
}

.squeeze {
    transition: all 1.5s;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.site-nav .site-nav-list .site-nav-item .site-nav-child{
    display: none;
    position: absolute;
    left: 0;
    top: 65px;
    min-width: 100%;
    line-height: 36px;
    padding: 5px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    border: 1px solid #eee;
    background-color: #fff;
    z-index: 100;
    border-radius: 2px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: .3s;
}
.site-nav .site-nav-list .site-nav-item .site-nav-child::after{
    content: '';
    position: absolute;
    top: -10px;
    height: 10px;
    width: 100%;
}
.site-nav .site-nav-list .site-nav-item:hover .site-nav-child{
    display: block;
}
.site-nav .site-nav-list .site-nav-item .site-nav-child dd {
    margin: 1px 0;
    position: relative;
}
.site-nav .site-nav-list .site-nav-item .site-nav-child dd a {
    display: block;
    padding: 4px 20px;
    color: #333333;
    text-align: center;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.site-nav .site-nav-list .site-nav-item .site-nav-child dd a:hover{
    background-color: #EEEEEE;
}

/* PC全屏导航 */
.screen-site-nav{
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    background-image: url('../images/dh_bj.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.3s;
}
.screen-site-nav.active {
    height: 100vh;
    padding-top: 20vh;
    opacity: 1;
}
.screen-site-nav .screen-site-nav-list{
    display: flex;
    flex-direction: row;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item{
    flex: 1;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-header{
    padding: 16px 0;
    position: relative;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-header::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 1px;
    background-color: #D8D8D8;
    transition: 0.3s;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-header:hover::after{
    height: 2px;
    background-color: rgba(56, 253, 255, 1);
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-header h2{
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    display: inline-block;
    position: relative;
    transition: 0.3s;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-header h2:hover{
    color: rgba(56, 253, 255, 1);
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-body{
    padding-top: 16px;
    display: flex;
    flex-direction: column; 
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-body h3{
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: inline-block;
    position: relative;
    padding: 8px 0;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: 0.3s;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-body h3:hover{
    color: rgba(56, 253, 255, 1);
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-body h3::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: rgba(56, 253, 255, 1);
    transition: 0.3s;
}
.screen-site-nav .screen-site-nav-list .screen-site-nav-item .screen-site-nav-item-body h3:hover::after{
    width: 100%;
    height: 2px;
}

/* 移动导航 */
#mobile-nav {
    display: none;
}
#mobile-nav .mobile-nav-item {
    border-bottom: 1px solid #EEEEEE;
}
#mobile-nav .mobile-nav-item .mobile-nav-item-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48px;
    padding: 0 16px;
}
#mobile-nav .mobile-nav-item .mobile-nav-item-body h2 {
    font-size: 16px;
    margin-right: auto;
}
#mobile-nav .mobile-nav-item .mobile-nav-item-son {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
}
#mobile-nav .mobile-nav-item .mobile-nav-item-son .mobile-nav-item-son-item {
    display: inline-block;
    width: 25%;
    font-size: 14px;
    background-color: #f7f7f7;
    border-radius: 4px;
    padding: 8px 8px;
    margin: 4px;
    text-align: center;
}
/* 
* 页面 二级导航菜单
*/
.page-column{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #DDDDDD;
    position: relative;
}
.page-column-item{
    flex-shrink: 0;
    display: inline-block;
    padding: 20px;
    position: relative;
}
.page-column-item.active{
    color: #0D67C2;
}
.page-column-item:hover{
    color: #0D67C2;
}
.page-column-item::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
}
.page-column-item.active::after{
    background-color: #0D67C2;
}
.page-column-item:hover::after{
    background-color: #0D67C2;
}
@media screen and (max-width:767.98px){
    .page-column{
        justify-content: flex-start;
        overflow-x: auto;
    }
    .page-column-item{
        display: inline-block;
        padding: 20px;
        position: relative;
    }
    .page-column-item.active{
        color: #0D67C2;
    }
    .page-column-item:hover{
        color: #0D67C2;
    }
    .page-column-item::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
    }
}
/* 
* 页面 面包屑导航
*/
.page-breadcrumb{
    padding: 20px 0;
}
@media screen and (max-width:767.98px){
    .page-breadcrumb{
        padding: 10px 0;
    }
}

/* 
* 页面 main
*/
.page-main{
    padding-top: 16px;
    padding-bottom: 40px;
}



/* 文章列表 - 卡片样式 1 */
.article-item-styleCard{
    display: block;
    background-color: #F5FBFF;
    box-sizing: border-box;
    border: 1px solid #D4E6F4;
    border-radius: 8px;
    width: 100%;
    height: 90px;
    position: relative;
    padding-top: 26px;
    padding-left: 20px;
    padding-right: 10px;
    top: 0;
    transition: 0.3s;
}
.article-item-styleCard:hover{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    top: -4px;
}
.article-item-styleCard .article-date{
    background-size: 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 100px;
    height: 30px;
    line-height: 20px;
    padding-left: 14px;
    position: absolute;
    top: -5px;
    left: -1px;
    color: #FFFFFF;
    font-size: 12px;
}
.article-item-styleCard .article-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}
/* 文章列表 - 列表页列表样式 1 */
.page-content .article-list{
    margin-top: 16px;
}
.page-content .article-list .article-item{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 140px;
    /*margin-bottom: 50px;*/
}
@media screen and (max-width:767.98px){
    .page-content .article-list .article-item{
        height: auto;
    }
}
.page-content .article-list .article-item .article-img{
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 190px;
    height: calc(190px * 0.74);
    background-color: #E4F0FF;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-right: 20px;
    transition: 0.3s;
}
@media screen and (max-width:767.98px){
    .page-content .article-list .article-item .article-img{
        width: 120px;
        height: calc(120px * 0.74);
        margin-right: 20px;
    }
}
.page-content .article-list .article-item .article-img:hover{
    background-size: 110% 110%;
}
.page-content .article-list .article-item .article-body{
    flex: 1;
}
.page-content .article-list .article-item h5{
    font-size: 16px;
    color: #323232;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8D8D8;
    /*height: 48px;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.page-content .article-list .article-item h5:hover{
    color: #3594F7;
}
.page-content .article-list .article-item .article-desc{
    font-size: 14px;
    color: #757575;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    margin-top: 10px;
}
.page-content .article-list .article-item .article-info{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0;
}
.page-content .article-list .article-item .article-column{
    background-color: #E8F3FF;
    border-radius: 4px;
    padding: 2px 14px;
    font-size: 12px;
    color: #0D67C2;
    text-align: center;
}
.page-content .article-list .article-item .article-time{
    font-size: 12px;
    color: #757575;
    margin-left: 24px;
}



/* 视频列表 - 样式 1 */
.video-item{
    position: relative;
}
.viede-column{
    width: 104px;
    height: 28px;
    line-height: 28px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 4px;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: 0.3s;
}
.viede-column:hover{
    color: #1590DA;
    background-color: #FFFFFF;
}
.video-item .video-item-img{
    display: block;
    padding-top: 60%;
    background-color: #F5FBFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transition: 0.3s;
}
.video-item .video-item-img:hover{
    background-size: 110% 110%;
}
.video-item .video-item-title{
    font-weight: 400;
    font-size: 16px;
    color: #222222;
    text-align: center;
    margin-top: 8px;
    transition: 0.3s;
}
.video-item .video-item-title:hover{
    color: #1590DA;
}
@media screen and (max-width:767.98px){
    .video-item .video-item-title{ font-size: 14px; margin-top: 10px; }
}
.viede-column-t{
    display: block;
    font-size: 12px;
    color: #999999;
    margin-top: 8px;
    text-align: center;
}
.viede-column-t:hover{
    color: #0D67C2;
}
/* @media screen and (min-width:768px){

} */

/* 详情页 文章标题 */
.page-main .page-content .article-title{
    font-size: 32px;
    font-weight: 600;
    color: #222222;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 16px;
}
.page-main .page-content .article-info{
    color:#818B92;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}
.page-main .page-content .text-content{
    padding-top: 24px;
    line-height: 1.8;
}

.page-main .page-content .text-content a{
    transition: 0.3s;
    color: #3594F7;
}
.page-main .page-content .text-content a:hover{
    color: #3594F7;
    text-decoration: underline;
}

/* 网站底部 */
.site-footer{
    background-color: #0D67C2;
    padding-top: 40px;
    padding-bottom: 20px;
}
.site-footer-left{
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1.8;
    padding-top: 24px;
}
.site-footer-left .shiye{
    display: inline-block;
}
.qr-code{
    text-align: right;
    margin-top: 0;
}
.qr-code .qr-code-item{
    display: inline-block;
    margin-right: 16px;
}
.qr-code .qr-code-item img{
    width: 112px;
}
.qr-code .qr-code-item label{
    display: block;
    text-align: center;
    color: #FFFFFF;
    margin-top: 10px;
}
@media screen and (max-width:767.98px){
    .site-footer{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .site-footer-left{
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: self-start;
        padding-top: 0;
    }
    .qr-code{
        text-align: left;
        margin-top: 16px;
    }
    .qr-code .qr-code-item img{
        width: 80px;
    }
}


/* 分页 */
.pagination{
    display: flex;
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
}
.pagination li{
    width: 42px;
    height: 42px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    margin-right: 8px;
    transition: 0.3s;
}
.pagination li span,
.pagination li a{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.pagination li.disabled{
    opacity: 0.5;
}
.pagination li.active{
    border: 1px solid #0D67C2;
}
.pagination li a:hover{
    background-color: #0D67C2;
    color: #FFFFFF;
}
.article-prevnext{
    border-top: 1px solid #CCCCCC;
    padding-top: 16px;
    margin-top: 32px;
}
.article-prevnext a{
    transition: 0.3s;
    color: #3594F7;
}
.article-prevnext a:hover{
    color: #3594F7;
    text-decoration: underline;
}